@keyframes demo
{
    from
    {
    }
    to
    {
    }
}

@-webkit-keyframes demo
{
    from
    {
    }
    to
    {
    }
}

.demo
{
}

/*由下至上 淡出淡入*/
@-webkit-keyframes bounceInDown
{
    from, 60%, 75%, 90%, to
    {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0%
    {
        opacity: 0;
        -webkit-transform: translate3d(0, -300px, 0);
        transform: translate3d(0, -300px, 0);
    }

    to
    {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInDown
{
    from, 60%, 75%, 90%, to
    {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0%
    {
        opacity: 0;
        -webkit-transform: translate3d(0, -300px, 0);
        transform: translate3d(0, -300px, 0);
    }

    90%
    {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to
    {
        -webkit-transform: none;
        transform: none;
    }
}



/*标题字体 -- 由下至上 淡出淡入*/
@-webkit-keyframes Upopacity
{
    from
    {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }

    to
    {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes Upopacity
{
    from
    {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }

    to
    {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}




@-webkit-keyframes bounceInUp
{
    from, 60%, 75%, 90%, to
    {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from
    {
        opacity: 0;
        -webkit-transform: translate3d(0, 500px, 0);
        transform: translate3d(0, 500px, 0);
    }

    to
    {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp
{
    from, 60%, 75%, 90%, to
    {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from
    {
        opacity: 0;
        -webkit-transform: translate3d(0, 500px, 0);
        transform: translate3d(0, 500px, 0);
    }
    /* 浮动回弹
        60%
    {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75%
    {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90%
    {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

   */
    to
    {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}



/*淡入淡出*/
@keyframes opacity
{
    from
    {
        opacity: 0;
    }

    to
    {
        opacity: 1;
    }
}

@-webkit-keyframes opacity
{
    from
    {
        opacity: 0;
    }

    to
    {
        opacity: 1;
    }
}




@keyframes smallBig3D
{
    from
    {
        transform: scale3d(0.01, 0.01, 1);
        -webkit-transform: scale3d(0.01, 0.01, 1);
    }

    to
    {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
}
/*由小变大*/
@-webkit-keyframes smallBig3D
{
    from
    {
        transform: scale3d(0.01, 0.01, 1);
        -webkit-transform: scale3d(0.01, 0.01, 1);
    }

    to
    {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
}



@-webkit-keyframes bounceInLeft
{


    0%
    {
        opacity: 0;
        -webkit-transform: translate3d(-300px, 0, 0);
        transform: translate3d(-300px, 0, 0);
    }

    to
    {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInLeft
{


    0%
    {
        opacity: 0;
        -webkit-transform: translate3d(-300px, 0, 0);
        transform: translate3d(-300px, 0, 0);
    }

    to
    {
        -webkit-transform: none;
        transform: none;
    }
}


@-webkit-keyframes bounceInRight
{

    from
    {
        opacity: 0;
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    to
    {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInRight
{
    from
    {
        opacity: 0;
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    to
    {
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes lightSpeedOut
{
    from
    {
        opacity: 1;
    }

    to
    {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 220deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 220deg);
    }
}

@keyframes lightSpeedOut
{
    from
    {
        opacity: 1;
    }

    to
    {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 220deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 220deg);
    }
}


@media (min-width: 992px)
{
    .lightSpeedOut
    {
        -webkit-animation-name: lightSpeedOut;
        animation-name: lightSpeedOut;
        -webkit-animation-duration: 2s !important;
        animation-duration: 2s !important;
    }

    .bounceInDown
    {
        -webkit-animation-name: bounceInDown;
        animation-name: bounceInDown;
    }

    .bounceInRight
    {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }

    .bounceInRight4
    {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
        animation-delay: 0.4s !important;
        -webkit-animation-delay: 0.4s !important;
    }

    .bounceInRight5
    {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
        animation-delay: 0.5s !important;
        -webkit-animation-delay: 0.5s !important;
    }

    .bounceInRight6
    {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
        animation-delay: 0.6s !important;
        -webkit-animation-delay: 0.6s !important;
    }

    .bounceInRight7
    {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
        animation-delay: 0.7s !important;
        -webkit-animation-delay: 0.7s !important;
    }

    .bounceInRight8
    {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
        animation-delay: 0.8s !important;
        -webkit-animation-delay: 0.8s !important;
    }

    .bounceInRight10
    {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
        animation-delay: 0.55s !important;
        -webkit-animation-delay: 0.55s !important;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }

    .bounceInLeft
    {
        -webkit-animation-name: bounceInLeft;
        animation-name: bounceInLeft;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }

    .bounceInLeft8
    {
        -webkit-animation-name: bounceInLeft;
        animation-name: bounceInLeft;
        animation-delay: 0.45s !important;
        -webkit-animation-delay: 0.45s !important;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }

    .smallBig3D
    {
        -webkit-animation-name: smallBig3D;
        animation-name: smallBig3D;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }

    .smallBig3D1
    {
        -webkit-animation-name: smallBig3D;
        animation-name: smallBig3D;
        animation-delay: 0.1s !important;
        -webkit-animation-delay: 0.1s !important;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }

    .smallBig3D2
    {
        -webkit-animation-name: smallBig3D;
        animation-name: smallBig3D;
        animation-delay: 0.15s !important;
        -webkit-animation-delay: 0.15s !important;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }

    .smallBig3D3
    {
        -webkit-animation-name: smallBig3D;
        animation-name: smallBig3D;
        animation-delay: 0.2s !important;
        -webkit-animation-delay: 0.2s !important;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }
    .smallBig3D4
    {
        -webkit-animation-name: smallBig3D;
        animation-name: smallBig3D;
        animation-delay: 0.25s !important;
        -webkit-animation-delay: 0.2s !important;
        -webkit-animation-duration: 1s !important;
        animation-duration: 1s !important;
    }
    .bounceInUp
    {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
    }

    .bounceInUp1
    {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
        animation-delay: 0.1s !important;
        -webkit-animation-delay: 0.1s !important;
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
    }

    .bounceInUp2
    {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
        animation-delay: 0.15s !important;
        -webkit-animation-delay: 0.15s !important;
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
    }

    .bounceInUp3
    {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
        animation-delay: 0.2s !important;
        -webkit-animation-delay: 0.2s !important;
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
    }

    .bounceInUp4
    {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
        animation-delay: 0.25s !important;
        -webkit-animation-delay: 0.25s !important;
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
    }

    .bounceInUp6
    {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
        animation-delay: 0.35s !important;
        -webkit-animation-delay: 0.35s !important;
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
    }

    .bounceInUp12
    {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp;
        animation-delay: .85s !important;
        -webkit-animation-delay: .85s !important;
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
    }

    .opacity
    {
        -webkit-animation-name: opacity;
        animation-name: opacity;
        animation-delay: 0.3s !important;
        -webkit-animation-delay: 0.3s !important;
    }

    .opacity2
    {
        -webkit-animation-name: opacity;
        animation-name: opacity;
        animation-delay: 0.6s !important;
        -webkit-animation-delay: 0.6s !important;
    }
    .opacity3
    {
        -webkit-animation-name: opacity;
        animation-name: opacity;      
         -webkit-animation-duration: .3s;
        animation-duration: .3s;
    }
    .Upopacity
    {
        -webkit-animation-name: Upopacity;
        animation-name: Upopacity;
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
    }

    .Upopacity1
    {
        -webkit-animation-name: Upopacity;
        animation-name: Upopacity;
        animation-delay: 0.1s !important;
        -webkit-animation-delay: 0.1s !important;
        animation-duration: 1.4s !important;
        -webkit-animation-duration: 1.4s !important;
    }

    .Upopacity2
    {
        -webkit-animation-name: Upopacity;
        animation-name: Upopacity;
        animation-delay: 0.2s !important;
        -webkit-animation-delay: 0.2s !important;
        animation-duration: 1.4s !important;
        -webkit-animation-duration: 1.4s !important;
    }

    .animated
    {
        -webkit-animation-duration: 2.3s;
        animation-duration: 2.3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
}